<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI自动化测试结果</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-result { border-collapse: collapse; width: 100%; margin-top: 20px; }
        .test-result th, .test-result td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        .test-result th { background-color: #f2f2f2; }
        .result-column { text-align: center; }
        .passed { background-color: #c8e6c9; color: #000; }
        .failed { background-color: #ffcdd2; color: #000; }
        .filter-options { margin-bottom: 10px; }
    </style>
</head>
<body>
    <h1>自动化测试结果</h1>
    <p>测试用例数：{{ total }}</p>
    <p>通过测试用例数：{{ pass }}</p>
    <p>失败测试用例数：{{ fail }}</p>
    <p id="pass-rate">通过率： <span>{{ pass_rate }}%</span></p>

    <div class="filter-options">
        <button onclick="filterTests('all')">全部</button>
        <button onclick="filterTests('passed')">通过</button>
        <button onclick="filterTests('failed')">失败</button>
    </div>

    <table class="test-result">
        <tr><th>用例编号</th><th>用例名称</th><th class="result-column">测试结果</th><th>详细信息</th></tr>
        {% for r in rows %}
        <tr>
            <td>{{ r.id }}</td>
            <td>{{ r.name }}</td>
            <td class="result-column {{ 'passed' if r.status=='PASS' else 'failed' }}">{{ r.status }}</td>
            <td>{{ r.detail }}</td>
        </tr>
        {% endfor %}
    </table>

    <script>
        function filterTests(filter) {
            const rows = document.querySelectorAll('.test-result tr');
            rows.forEach(row => {
                if (row.querySelector('th')) { row.style.display = ''; }
                else {
                    const status = row.cells[2].textContent.trim();
                    if (filter === 'all') row.style.display = '';
                    else if (filter === 'passed') row.style.display = status === 'PASS' ? '' : 'none';
                    else if (filter === 'failed') row.style.display = status === 'FAIL' ? '' : 'none';
                }
            });
        }
    </script>
</body>
</html>